<template>
  <!-- 互联代售  配置货源 -->
  <div>
    <el-dialog title="配置货源" @close="close" :visible.sync="visiblePeizhi" width="1200px" append-to-body>
      <el-form class="form-box new_form_box" ref="form" :model="form" :rules="rules" :inline="true" v-loading="loading">
        <el-form-item label="渠道名称:" prop="" style="width: 100%;">
          <b>{{ qudaoItem.name }}</b>
        </el-form-item>
        <div style="margin: 10px 5px;">
          <formSubTitVue title="游戏" />
        </div>
        <el-form-item label="" prop="selectGameIds" class="row">
          <!-- <div style="margin-left: 8px;">
            <el-checkbox v-model="checkAllGames" @change="checkAllGamesChange">
              <b>选择全部游戏</b>
            </el-checkbox>
          </div> -->
          <div style="padding-top: 10px;"></div>
          <el-checkbox-group class="addKefu" v-model="form.selectGameIds" @change="gameChange">
            <el-checkbox v-for="(item,key) in gameListSeleltOptions" :key="key" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div style="margin: 10px 5px;">
          <formSubTitVue title="货源" />
        </div>
        <div class="shop-box">
          <div>
            <el-button @click="openAddShop" type="primary" icon="el-icon-plus">添加供货人</el-button>
          </div>
          <div class="shoplist flex">
            <div class="shop-item" v-for="(item,j) in selectedShopList" :key="item.tenantId">
              <div class="name">店铺：{{ item.superTenantName }}</div>
              <div class="yuangong">
                供货人：{{ item.superName }}
              </div>
              <i class="el-icon-edit" style="margin-right: 20px;" @click="editShop(j)"></i>
              <i class="el-icon-close" @click="delShop(j)"></i>
            </div>
          </div>
        </div>
        
        <el-form-item label="通道:" prop="">
          <div class="flex alc">
            <el-input :disabled="!checkPermi(['searchTenantID'])" v-model="form.type" placeholder="通道"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="状态:" prop="state">
          <el-radio-group v-model="form.state">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div >
          <div style="color: #999;margin-bottom: 15px;" v-if="tongdaoshuomingObj[form.type]">通道说明： 预计【{{ tongdaoshuomingObj[form.type] }}】，如果当前推送任务过多，可能会延迟执行，请耐心等待。</div>
        </div>
        <el-form-item label="价格区间:" prop="">
          <div class="flex alc">
            <el-input v-model="form.zuidijia" style="width: 100px;" placeholder="最低价"></el-input>
            <span style="margin: 0 20px;">-</span>
            <el-input v-model="form.zuigaojia" style="width: 100px;" placeholder="最高价"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="真假账号:" prop="zhenjia" >
          <el-radio-group v-model="form.zhenjia" style="width: 400px;">
            <el-radio :label="1">原账号</el-radio>
            <el-radio :label="2">假账号</el-radio>
            <el-radio :label="3">账号少一位</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="center" style="margin-top: 15px;">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-form>

    </el-dialog>
    <addGonghuoren ref="addGonghuoren" @success="addShop"></addGonghuoren>
  </div>
</template>

<script>
import interfaceChannelApi from "@/api/interfaceChannel/index";
import {
  hulianSelectPushSave,
  hulianSelectPushEdit,
  hulianSelectPushQuery,
} from "../../../api/partner/partner";
import addGonghuoren from "./addGonghuoren.vue";
export default {
  name: "",
  components: { addGonghuoren },
  data() {
    return {
      visiblePeizhi: false,
      loading: false,
      form: {
        config: "",
        gameIds: "",
        games: "",
        selectGameIds: [],
        hulianInterfacePushList: [],
        zhenjia: 1,
        zuidijia: "",
        zuigaojia: "",
        type: "",
        state:'0'
      },
      rules: {},
      selectGameNames: [],
      qudaoItem: "",
      gameListSeleltOptions: [],
      selectedShopList: [], //已选择的供货店铺
      tongdaoshuomingObj: {},
    };
  },
  created() {},
  computed: {
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  methods: {
    async open(qudao) {
      this.qudaoItem = qudao;
      this.form.config = this.qudaoItem.id;
      this.visiblePeizhi = true;
      this.form.type = ''
      const configOld = await this.getConfigList();
      if (configOld) {
        // 编辑
        this.form.selectGameIds = [];
        if (configOld.gameIds) {
          const arr = configOld.gameIds.split(",");
          arr.forEach((r) => {
            this.form.selectGameIds.push(Number(r));
          });
        }
        if (configOld.hulianInterfacePushList) {
          this.selectedShopList = configOld.hulianInterfacePushList;
        }
        if (configOld.tiaojian) {
          const tiaojianObj = JSON.parse(configOld.tiaojian);
          this.form.zuidijia = tiaojianObj.zuidijia;
          this.form.zuigaojia = tiaojianObj.zuigaojia;
          this.form.zhenjia = tiaojianObj.zhenjia;
        }
        this.form = { ...this.form, ...configOld };
        this.getInterfaceChannel();
      } else {
        // 新增
        this.form.id = null;
        this.getInterfaceChannel("add");
      }
      this.getTongdao();
    },
    // 获取通道说明 字典
    getTongdao() {
      this.getDicts("tongdaoshuoming").then((r) => {
        if (r.data && r.data.length) {
          const obj = this.arrayToObject(r.data, "dictLabel");
          if (obj.tongdaoshuoming) {
            try {
              this.tongdaoshuomingObj = JSON.parse(
                obj.tongdaoshuoming.remark
              ).hulianSelectPush;
            } catch (error) {}
          }
        }
      });
    },
    // 查询推送配置
    async getConfigList() {
      this.loading = true;
      let res = await hulianSelectPushQuery({
        config: this.qudaoItem.id,
      });
      this.loading = false;
      if (res.data) {
        // 正常 有数据
        return res.data;
      } else {
        // 正常 无数据
        return false;
      }
    },

    // 获取该接口渠道下的游戏
    async getInterfaceChannel(flag) {
      this.gameListSeleltOptions = [];
      // 获取该接口渠道下的游戏
      let { data } = await interfaceChannelApi.getInterfaceChannel(
        this.qudaoItem.interfaceUserId
      );
      if (this.allGameList && this.allGameList.length && data.gameIds) {
        let idArr = data.gameIds.split(",");
        this.allGameList.forEach((r) => {
          if (idArr.find((r2) => r2 == r.id)) {
            this.gameListSeleltOptions.push(JSON.parse(JSON.stringify(r)));
          }
        });
      }
      if (flag == "add") {
        this.form.type = data.type;
      }
    },
    // 打开供货人选择
    openAddShop() {
      this.$refs.addGonghuoren.open();
    },
    // 选择完成
    addShop(shopInfo) {
      let isEdit = false
      if(this.selectedShopList&&this.selectedShopList.length){
        // 遍历已有店铺  重复的覆盖掉
        this.selectedShopList.forEach((shop,i)=>{
          if(shop.superTenantId==shopInfo.superTenantId){
            this.selectedShopList[i] = { ...shopInfo }
            isEdit = true
          }
        })
      }
      if(!isEdit){
        // 新增的直接push
        this.selectedShopList.push({ ...shopInfo });
      }
      this.$forceUpdate()
    },
    // 删除供货店铺
    delShop(e) {
      this.selectedShopList.splice(e, 1);
    },
    // 编辑供货店铺
    editShop(e){
      const shopDetail = this.selectedShopList[e]
      this.$refs.addGonghuoren.open(shopDetail);
    },
    // 选择游戏改变
    gameChange(e) {
      this.selectGameNames = [];
      this.form.gameIds = e.join(",");
      if (e && e.length) {
        this.allGameList.forEach((game) => {
          if (e.includes(game.id)) {
            this.selectGameNames.push(game.name);
          }
        });
      }
    },
    // // 选择全部游戏
    // checkAllGamesChange(e) {
    //   this.selectGameNames = [];
    //   this.form.gameIds = "";
    //   const idArr = [];
    //   if (e) {
    //     this.gameList.forEach((game) => {
    //       this.selectGameNames.push(game.name);
    //       idArr.push(game.id);
    //     });
    //   }
    //   this.form.selectGameIds = [...idArr];
    //   this.form.gameIds = idArr.join(",");
    // },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.selectGameNames && this.selectGameNames.length) {
            this.form.games = this.selectGameNames.join(",");
          }
          this.form.hulianInterfacePushList = this.selectedShopList;
          const obj = {
            zhenjia: this.form.zhenjia,
            zuidijia: this.form.zuidijia,
            zuigaojia: this.form.zuigaojia,
          };
          this.form.tiaojian = JSON.stringify(obj);
          if (this.form.id) {
            // 编辑接口
            hulianSelectPushEdit(this.form).then((res) => {
              this.cancel();
              if (res.code == 200) {
                this.$message.success(res.msg);
              }
            });
          } else {
            this.form.tenantId = this.qudaoItem.tenantId
            hulianSelectPushSave(this.form).then((res) => {
              this.cancel();
              if (res.code == 200) {
                this.$message.success(res.msg);
              }
            });
          }
        } else {
          this.$message.error("请填写完整！");
        }
      });
    },

    // 表单重置
    reset() {
      this.$refs.form.resetFields();
      this.form.hulianInterfacePushList = [];
      this.form.zuidijia = "";
      this.form.zuigaojia = "";
      this.selectedShopList = [];
      this.selectGameNames = [];
      this.gameListSeleltOptions = [];
    },
    cancel() {
      this.visiblePeizhi = false;
    },
    close() {
      this.reset();
    },
  },
};
</script>
<style  lang="scss" scoped>
.shop-box {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(102, 111, 232, 0.08);
  padding: 15px;
  margin-bottom: 15px;

  .shoplist {
    margin-top: 10px;
    flex-wrap: wrap;
    .shop-item {
      width: 180px;
      position: relative;
      background: #fafafa;
      border-radius: 4px;
      border: 1px solid #bfc5d2;
      padding: 5px 8px;
      padding-right: 15px;
      margin-right: 10px;
      margin-bottom: 7px;
      .name {
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .yuangong {
        color: #808191;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
      }
      i {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
  }
}
.addKefu {
  ::v-deep .el-checkbox {
    width: 150px;
    background: #ebeff8;
    border-radius: 4px;
    overflow: hidden;
    padding-left: 8px;
    margin-right: 10px;
    margin-bottom: -10px;
  }
}
</style>
